<template>
    <div>
        <el-card class='box-card'>
            <el-row>
                <el-col :span='12'>
                    <el-input placeholder='请输入部门名称'></el-input>
                </el-col>
                <el-col :span='12'>
                    <el-button type='primary'>检索</el-button>
                </el-col>
            </el-row>
            <br>
            <br>
            <el-button type='primary'>添加部门</el-button>
            <el-table
                :data='tableData'
                style='width: 100%;margin-bottom: 20px;'
                row-key='name'
                border
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                <el-table-column
                    prop='name'
                    label='姓名'
                    sortable
                >
                </el-table-column>
                <el-table-column
                    label='操作'
                >
                    <template slot-scope='scope'>
                        <el-button
                            type='text'
                            size='small'>
                            新增子部门
                        </el-button>
                        <el-button
                            type='text'
                            size='small'>
                            删除部门
                        </el-button>
                    </template>
                </el-table-column>

            </el-table>
            <el-pagination
                background
                layout='prev, pager, next'
                :total='100'>
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
export default {
    data() {
        return {
            tableData: [
                {
                    name: '粮食部',
                    children: [
                        {
                            name: '粮食部二级部门'
                        }, {
                            name: '粮食二级部门2'
                        }
                        ]
                },
                {
                    name:'工业部'
                },
                {
                    name:'工业部'
                },
                {
                    name:'工业部'
                },
                {
                    name:'工业部'
                },
                {
                    name:'工业部'
                },
                {
                    name:'工业部'
                }
                ]
        }
    },
    name: 'index',
    methods: {
        handleClick(row) {
            console.log(row)
        }
    }
}
</script>

<style scoped>

</style>
